<template>
  <div>
    <el-row style="margin-bottom:20px;display:flex;justify-content:flex-start;padding-right: 30px;">
      <el-date-picker v-model="examinetime" style="width:40%;margin-right:20px;padding-right: 30px;" type="daterange" rangeSeparator="至"
        startPlaceholder="开始日期" endPlaceholder="结束日期" valueFormat="yyyy-MM-dd" clearable
      >
      </el-date-picker>
      <el-select style="width:33.3%;padding-right: 30px;" v-model="mounttype" placeholder="请选择报销种类" @change="getsecondearr($event)">
        <el-option v-for="item in firstarr" :key="item.value" :label="item.hash.code_name" :value="item.hash.code_id"></el-option>
      </el-select>
      <el-select style="width:33.3%;padding-right: 30px;" v-model="childmounttype" placeholder="请选择报销子类" :disabled="mounttype==''">
        <el-option v-for="item in secondarr" :key="item.value" :label="item.hash.code_name" :value="item.hash.code_id"></el-option>
      </el-select>
      <el-input v-model="content" style="width:33.3%;padding-right: 30px;" placeholder="请输入报销内容" clearable></el-input>

    </el-row>
    <el-row style="margin-bottom:20px;display:flex;justify-content:flex-start;padding-right: 30px;">
      <selectorg @getselectorgid="getselectorgid" style="padding-right: 30px;"></selectorg>
      <el-select v-model="paytype" placeholder="支付方式" style="width:20%;margin:0px 10px">
        <el-option v-for="item in reimtypearr" :key="item.value" :label="item.hash.code_name" :value="item.hash.code_id"></el-option>
      </el-select>
      <el-input v-model="jes" style="width:23.3%;" placeholder="报销金额下限" clearable></el-input>
      <span style="margin:10px ">至</span>
      <el-input v-model="jez" style="width:23.3%;" placeholder="报销金额上限" clearable></el-input>
      <span style="margin:10px"></span>
      <el-input v-model="zjes" style="width:23.3%;" placeholder="总金额下限" clearable></el-input>
      <span style="margin:10px ">至</span>
      <el-input v-model="zjez" style="width:23.3%;" placeholder="总金额上限" clearable></el-input>

    </el-row>
    <el-row>
      <el-input v-model="username" style="width:23.3%;padding-right: 30px;" placeholder="员工姓名" clearable></el-input>
      <el-input v-model="beizhu" style="width:23.3%;margin:0px 10px" placeholder="备注" clearable></el-input>
      <el-button size="mini" type="primary" @click="getlist(1)">查询</el-button>
      <el-button size="mini" type="info" @click="daochu(1)">导出</el-button>
      <span style="padding-left:15px">总金额：{{allsum}}</span>
    </el-row>
    <el-divider></el-divider>
    <ptable :tableData="list" :pagobj.sync="pagobj"></ptable>
    <ptable id="tableExcelreim" :tableData="list1" v-show="false" :pagobj.sync="pagobj"></ptable>

    <checksp :nowapprovalid="nowapprovalid" v-if="showresub" :isnew="false" atypeid="0101"
      :checkitem="checkitem" :fun="fun2"
    ></checksp>

  </div>
</template>

<script>
import checksp from '~/components/apply/checksp';
import ptable from '~/components/querysum/reim/reimtable.vue';
import selectorg from '~/components/common/selectorg.vue';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

export default {
  components: {
    ptable, selectorg, checksp,
  },
  data() {
    return {

      ts: this.newStore(),
      list: [],
      list1: [],
      examinetime: [],
      childmounttype: '',
      mounttype: '',
      content: '',
      dept: '',
      username: '',
      firstarr: [],
      secondarr: [],
      jes: '',
      jez: '',
      zjes: '',
      zjez: '',
      paytype: '',
      reimtypearr: [],
      beizhu: '',
      showresub: false,
      nowapprovalid: '',
      pagobj: {
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },
      checkitem: {
        hash: {
          atype: '',
          id: '',
        },
      },
      allsum: 0,
    };
  },
  mounted() {
    // this.getlist();
    this.getitem();
    this.getcodeData('0501', '05', 'reimtypearr');
    const date = new Date();
    const year = `${date.getFullYear()}`;
    const month = `${date.getMonth() + 1}`;
    const begin = `${year}-${month}-1`;
    const today = date.toLocaleDateString().split('/').join('-');
    this.examinetime = [begin, today];
    console.log(this.examinetime, 'this.examinetimethis.examinetime');
  },
  methods: {
    daochu(p) {
      if (p) {
        this.pagobj.currentPage3 = p;
      }
      if (!this.examinetime || this.examinetime.length < 1) {
        this.examinetime = ['', ''];
      }
      console.log('2222', this.examinetime);
      const req = {
        handle: 'E0E144082D7A10B2DC400B628CBD4AE8E81F8DBC2509FDCB',
        examines: this.examinetime[0],
        examinee: this.examinetime[1],
        mounttype: this.mounttype,
        childmounttype: this.childmounttype,
        content: this.content,
        branchid: this.dept,
        dept: this.dept,
        paytype: this.paytype,
        zjes: this.zjes,
        zjez: this.zjez,
        username: this.username,
        jes: this.jes,

        jez: this.jez,
        beizhu: this.beizhu,
        start: (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize,
        limit: this.pagobj.pagesize,
      };
      req.limit = 10000;
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.list1 = ts.d.data.operation1;
          if (this.list1.length == 0) {
            this.$message({
              type: 'error',
              message: '导出数据为空,无法导出',
            });
            return false;
          }

          const xlsxParam = { raw: true }; // 转换成excel时，使用原始的格式
          /* generate workbook object from table */
          const wb = XLSX.utils.table_to_book(
            document.querySelector('#tableExcelreim'),
            xlsxParam,
          );
          console.log(wb);
          /* get binary string as output */
          const wbout = XLSX.write(wb, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'array',
          });
          try {
            FileSaver.saveAs(
              new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }),
              'sheetjs.xlsx',
            );
          } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout);
          }
          return wbout;
        }
      });


      
    },

    opendiag(item) {
      console.log(item);

      this.nowapprovalid = item.hash.aid;
      this.checkitem.hash.atype = '0101';
      this.checkitem.hash.id = item.hash.aid;
      this.reload('showresub');
    },
    reload(partsname) {
      // console.log(partsname);
      this[partsname] = false;
      this.$nextTick(() => {
        this[partsname] = true;
      });
    },
    fun2() {

    },
    getselectorgid(val) {
      this.dept = val;
    },
    getitem() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '0505',
        codetype: '05',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.firstarr = ts.d.data.operation1;
      });
    },
    getsecondearr(val) {
      this.childmounttype = '';
      this.secondarr = [];
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: val,
        codetype: '05',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.secondarr = ts.d.data.operation1;
      });
    },
    getcodeData(supid, codetype, arrname) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this[arrname] = ts.d.data.operation1;
        // console.log(ts.d.data.operation1,'支付方式')
      });
    },
    // 获取列表
    getlist(p) {
      if (p) {
        this.pagobj.currentPage3 = p;
      }
      if (!this.examinetime || this.examinetime.length < 1) {
        this.examinetime = ['', ''];
      }
      console.log('2222', this.examinetime);
      const req = {
        handle: 'E0E144082D7A10B2DC400B628CBD4AE8E81F8DBC2509FDCB',
        examines: this.examinetime[0],
        examinee: this.examinetime[1],
        mounttype: this.mounttype,
        childmounttype: this.childmounttype,
        content: this.content,
        branchid: this.dept,
        dept: this.dept,
        paytype: this.paytype,
        zjes: this.zjes,
        zjez: this.zjez,
        username: this.username,
        jes: this.jes,

        jez: this.jez,
        beizhu: this.beizhu,
        start: (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize,
        limit: this.pagobj.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.list = ts.d.data.operation1;
          this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
          this.allsum = ts.d.data.operation2[0].hash.allsum;
        }
      });
      
    },
  },
};
</script>

